<template>
  <div class="app-container" style="background:rgb(240, 242, 245);width:100%;">
      <el-col>

        <el-row style="margin-top: 10px; margin-left: 10px">
          <el-col span="3">
            <div style="margin-left: 10px">
              企业 &nbsp;
              <el-select v-model="enterprises" placeholder="请选择" style="width: 150px" value="">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col span="4">
            <div style="margin-left: 10px">
              位置 &nbsp;
              <el-select v-model="sectionName" placeholder="请选择" style="width: 200px"  value="">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col span="15">
            <div style="margin-left: 10px">
              测点 &nbsp;
              <el-select v-model="measurePoints" placeholder="请选择" multiple :multiple-limit="5" style="width: 500px" value="">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="updateTemperatureChartAndTable">确定</el-button>
            </div>
          </el-col>
        </el-row>

        <el-row style="margin-left: 10px; margin-right: 20px; margin-top: 10px">
          <temperature :toTemperature="toTemperature" @func="getTableDataFormSon"></temperature>
        </el-row>

        <el-row style="margin-top: 20px; margin-left: 10px; margin-right: 10px">
          <el-col :span="10">
            <el-container  style="border: 1px solid #eee; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                <el-table :data="currTableData" style="width: 100%"  :show-header="false">
                  <el-table-column
                    prop="point"
                    label="数据点名称">
                    <template slot-scope="scope">
                      <div><p style="font-size: 10px; color: #888888">数据点名称</p></div>
                      <span style="font-size: 20px; color: #539FFF; font-weight:bold">{{scope.row.point}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="data"
                    label="最新数据">
                    <template slot-scope="scope">
                      <div><p style="font-size: 10px; color: #888888">最新数据</p></div>
                      <span style="font-size: 20px; color:#539FFF; font-weight:bold">{{scope.row.data}}</span>
                      <span style="font-size: 15px; color: #67C23A; font-weight:bold">℃</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="time"
                    label="时间">
                    <template slot-scope="scope">
                    <div><p style="font-size: 10px; color: #888888">更新时间</p></div>
                    <span style="font-size: 20px; color: #539FFF; font-weight:bold">{{scope.row.time}}</span>
                    </template>
                  </el-table-column>
                </el-table>
            </el-container>
          </el-col>

          <el-col :span="13" style="margin-left: 40px;">
            <el-container style="border: 1px solid #eee; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
              <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#539FFF',color:'#ffffff'}" stripe>
                <el-table-column
                  v-for="(col, i) in columns"
                  :key="i"
                  :prop="col.prop"
                  :label="col.label"
                ></el-table-column>
              </el-table>
            </el-container>
          </el-col>

        </el-row>

      </el-col>
  </div>
</template>

<script>
  import { get, get as userType, del, dels } from '@/api/sys/connSysAuthApi'
  import { parseTime } from '@/utils'
  import { req } from '@/api/base/BaseApi'

  import temperature from './temperature'
  import ElContainer from 'element-ui/packages/container/src/main'

  let userTypes = []
  export default {
    components: {
      ElContainer,
      temperature
    },
    data() {
      return {
        // options
        options1: [{
          value: '金陵石化',
          label: '金陵石化'
        }],
        options2: [{
          value: '东1#焦化工段',
          label: '东1#焦化工段'
        }],
        options: [{
          value: '测点1',
          label: '测点1'
        }, {
          value: '测点2',
          label: '测点2'
        }, {
          value: '测点3',
          label: '测点3'
        }, {
          value: '测点4',
          label: '测点4'
        }, {
          value: '测点5',
          label: '测点5'
        }, {
          value: '测点6',
          label: '测点6'
        }, {
          value: '测点7',
          label: '测点7'
        }, {
          value: '测点8',
          label: '测点8'
        }, {
          value: '测点9',
          label: '测点9'
        }, {
          value: '测点10',
          label: '测点10'
        }],
        enterprises: [],
        sectionName: [],
        measurePoints: [],
        toTemperature: ['测点2', '测点4', '测点5', '测点7', '测点10'],
        // table
        columns: [],
        tableData: [],
        currColumn: [],
        currTableData: []
      }
    },
    filters: {
      userTypeFilter(type) {
        let typeText = type
        userTypes.forEach((val) => {
          if (type === val.value) {
            typeText = val.name
          }
        })
        return typeText
      },
      menuFilter(ids) {
        let length = 0
        if (ids) {
          length = ids.length
        }
        return length
      },
      dateTimeFilter(time) {
        return parseTime(time)
      }
    },
    created() {

    },
    mounted() {
      this.$nextTick(() => {
        this.measurePoints = ['测点2', '测点4', '测点5', '测点7', '测点10']
        this.enterprises = ['金陵石化']
        this.sectionName = ['东1#焦化工段']
        this.updateTemperatureChartAndTable()
      })
    },
    beforeDestroy() {
    },
    methods: {
      getTableDataFormSon(data) {
        const tableDataTemp = data
        this.tableData = []
        for (let j = 9; j >= 0; j--) {
          const tableDataI = {}
          for (let i = 0; i < this.measurePoints.length; i++) {
            const point = this.measurePoints[i]
            const values = tableDataTemp.get(point)
            const date = new Date(values[j].name)
            if (i <= 0) {
              tableDataI['time'] = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
            }
            tableDataI[point + 'value'] = values[j].value
          }
          this.tableData.push(tableDataI)
        }
        this.currTableData = []
        for (let i = 0; i < this.measurePoints.length; i++) {
          const point = this.measurePoints[i]
          const values = tableDataTemp.get(point)
          const date = new Date(values[values.length - 1].name)
          this.currTableData.push({
            point: point,
            data: values[values.length - 1].value,
            time: date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
          })
        }
      },
      updateTemperatureChartAndTable() {
        this.toTemperature = this.measurePoints
        // 表格
        this.columns = []
        this.columns.push({
          prop: 'time',
          label: '时间'
        })
        for (let i = 0; i < this.measurePoints.length; i++) {
          this.columns.push({
            prop: this.measurePoints[i] + 'value',
            label: this.measurePoints[i]
          })
        }
      },
      page() {
        this.listLoading = true
        // console.log(this.listQuery)
        // req('/api/sys/auth/riskinfo/pages', 'put', this.listQuery).then(response => {
        //   this.list = response.data
        //   this.total = response.total
        //   this.listLoading = false
        // }).catch(() => console.log('page request error'))
      },
      get(id) {
        this.listLoading = true
        get(this.module, id).then(res => {
          this.info = res.data
          this.listLoading = false
        })
      },
      getUserType() {
        userType(this.module + '/userType').then(response => {
          if (response.data) {
            userTypes = response.data
          }
        })
      },
      handleDelete(id) {
        this.listLoading = true
        del(this.module, id).then(res => {
          this.page()
        }).catch(e => {
          this.listLoading = false
        })
      },
      handleDeletes() {
        this.listLoading = true
        dels(this.module, this.ids).then(res => {
          console.log(res)
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listLoading = true
        if (this.listQuery.keyword === undefined) {
          this.listQuery.keyword = ''
        }
        req('/api/sys/auth/riskinfo/sortCategoryInfo', 'put', this.listQuery.keyword).then(response => {
          this.list = response.data
          this.total = response.total
          this.listLoading = false
        }).catch(() => console.log('page request error'))
        //  this.listQuery.page = 1
        // this.page()
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.page()
      },
      handleCurrentChange(val) {
        console.log('handleCurrentChange')
        this.listQuery.page = val
        this.page()
      }
    }
  }
</script>
<style scoped>
  .demo-table-expand {
    font-size: 20px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100px;
  }
</style>

